<template>
  <div v-if="showdata" class="waybillEdit">
    <!-- class="tab-container waybill-tab-container tab-fixed" -->
    <div style="position: fixed;z-index: 11; top: 20px; left: 100px;">
      <div style="font-size:16px;">{{ waybillData.waybillNo }}</div>

      <el-tag
        v-if="activeName === 'receivable'"
        size="small"
        type="danger"
        effect="dark"
        class="pointer"
        @click="sign"
        >标记分配单号</el-tag
      >
    </div>

    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="应收应付" name="receivable" lazy>
          <Receivable
            ref="receivable"
            :verifyShow="verifyShow"
            :Constatvariable="waybillData"
            :initOptionsData="initOptionsData"
            :waybillInfo="tableInfo"
          ></Receivable>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
const ProgressBar = () => import("@/components/app/components/ProgressBar");
import Receivable from "./../waybillmerge/components/Receivable";
import { ajax } from "@/store/yg/common/utils";

export default {
  components: {
    Receivable
  },
  props: [],
  data() {
    return {
      waybillSingleId: 0,
      verifyShow: {
        //运单详情
        waybillView: true,
        //提单详情
        pickUpView: true,
        //发票
        invoiceView: true,
        //阿米巴
        amoebaView: true,
        //文件列表
        fileView: true,
        //应付应收
        payAndReceView: true,
        //应付
        payView: true,
        //应收
        receView: true,
        // 是否是跟单操作
        documentaryOperte: false,
        // ​是否是财务
        finace: false,
        // ​​是否是总部财务
        hqFinace: false,
        // ​​是否是HRA
        hra: false,
        // ​​其他
        other: false,
        // ​​是否是海外操作
        overseasOperte: false,
        // ​​是否是销售助理
        saleAssistant: false,
        // ​​是否是销售
        saler: false,
        // ​​是否是客服
        seller: false,
        // ​​是否是物流操作
        shippingOperte: false,
        // ​​是否是超级管理员
        superAdmin: false,
        // ​用户类型 一个用户有多种类型
        userTypes: [],
        // 删除文件
        deleteFile: false,
        // 上传文件
        uploadFile: false,
        // 下载文件
        downloadFile: false,
        // 推送文件
        pushFile: false,
        // 入库单数据
        instock: false,
        // 编辑阿米巴费用
        editAmoeba: false,
        // 删除阿米巴费用
        deleteAmoeba: false
      },
      simpleWaybillQuerySingleMap: {},
      waybillSingleIdCountMap: {},
      simpleWaybillForEditWaybillMergeAlls: {},
      showdata: false,
      waybillId: "",
      shippingway: "",
      waybillData: {},
      //下拉 值
      singleOptions: {},
      initOptionsData: {},
      pageType: "airFreight",
      showWaybillDetails: false,
      activeName: "edit",
      countryMap: {},
      serviceItemMap: {},
      tableInfo: [
        {
          operationId: "sam",
          salesmanId: "sam",
          waybillSingleId: "122121212",
          waybillNo: "121212121",
          isTaxFarming: "1",
          isCustomerDeclaration: "1",
          isVatAndEori: "1",
          eoriIsCertified: "1",
          dispatchAddressCode: "21341234",
          declareNameCn: "士大夫",
          inStockTotalPackages: 1212,
          inStockActualWeight: 123,
          inStockVolume: 123.3,
          waybillLabel: "tag",
          zipCode: "121222"
        }
      ],
      goodsData: [
        { boxType: "柜型" },
        { contairNumber: "柜号" },
        { sealNumber: "封条号" },
        { boxCount: "件数" },
        { packageType: "包装类型" },
        { grossWeight: "毛重" },
        { grossVolume: "体积" }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    var head =
      document.head ||
      document.getElementsByTagName("head")[0] ||
      document.documentElement;
    var baseUrl = head.baseURI;
    if (
      null != baseUrl &&
      baseUrl != "" &&
      baseUrl.indexOf("waybill__seafreightmerge__main") != -1
    ) {
      this.pageType = "seaFreight";
    }
    let tabName = sessionStorage.getItem("currentTab");
    //判断是否存在currentTab,即tab页之前是否被点击切换到别的页面
    if (tabName) {
      this.activeName = tabName;
    }
    this.waybillId = this.$route.query.pid;
    if (this.waybillId) {
      this.$router.push({
        query: {
          waybillId: this.waybillId
        }
      });
    } else {
      this.waybillId = this.$route.query.waybillId;
    }

    this.shippingway = this.$route.query.shippingway;
    var activeNameTab = this.$route.query.activeName;
    this.showTabByActive(activeNameTab);
    console.info(this.waybillId, this.shippingway);
    this.initWayBillData();
    this.initOptions();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开此路由之后清除保存的状态
    // 根据个人需求决定清除的时间
    sessionStorage.removeItem("currentTab");
    next();
  },
  methods: {
    sign() {
      console.log("this.$refs.receivable :>> ", this.$refs.receivable);
      this.$refs.receivable.sign();
    },
    async initOptions() {
      var param = {};
      var waybillId = this.$route.query.pid;
      if (waybillId) {
        this.$router.push({
          query: {
            waybillId: waybillId
          }
        });
      } else {
        waybillId = this.$route.query.waybillId;
      }
      param["id"] = waybillId;
      const initData = await ajax("getAllOptions", param);

      if (initData) {
        this.initOptionsData = initData.data;
        this.showWaybillDetails = true;
      } else {
        console.log("查询下拉接口出错 请检查接口");
      }
    },
    handleClick(tab) {
      // 点击tab后触发事件，修改显示页面
      sessionStorage.setItem("currentTab", tab.name);
    },
    showTabByActive(activeNameTab) {
      if (null != activeNameTab && activeNameTab != "") {
        this.activeName = activeNameTab;
      }
    },
    async init() {
      const { countryMap } = await initData();
      const { data } = await initAbroadWaybillRender();

      this.countryMap = countryMap;
      this.serviceItemMap = data.serviceItemMap;
    },
    initWayBillData() {
      var param = {};
      ajax("verifyPermissions", param).then(
        res => {
          console.log("海运末端全编辑校验权限", res);
          this.verifyShow = res;
        },
        error => {
          console.log(error);
        }
      );
      var waybillId = this.$route.query.pid;
      if (waybillId) {
        this.$router.push({
          query: {
            waybillId: waybillId
          }
        });
      } else {
        waybillId = this.$route.query.waybillId;
      }
      param["id"] = waybillId;
      param["shippingWayType"] = this.$route.query.shippingway;
      ajax("editWaybillMergeAll", param).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            this.waybillData = res.data;
            if (null != res.data2) {
              this.singleOptions = res.data2["singleOptions"];
              this.simpleWaybillQuerySingleMap =
                res.data2["simpleWaybillQuerySingleMap"];
              this.simpleWaybillForEditWaybillMergeAlls =
                res.data2["simpleWaybillForEditWaybillMergeAlls"];
              this.waybillSingleIdCountMap =
                res.data2["waybillSingleIdCountMap"];
            }
          }
          this.showdata = true;
        },
        error => {
          console.log(error);
        }
      );
    },
    async saveStateLine(params) {
      //保存轨迹节点
      console.log("params", params);
      console.log("waybillData", this.waybillData);
      params.waybillId = this.waybillData.id;
      params.time = params.operationDateTime;
      params.clickStatus = params.status;
      console.log("params2", params);
      const data = await ajax("updateWaybillStateAndTime", params);
      if (data.code === 200) {
        this.initWayBillData();
      } else {
        this.$message.error(data.failTips);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.title-icon {
  display: inline-block;
  width: 120px;
}
</style>
<style scoped>
/deep/ .el-tabs__item.is-disabled {
  color: #51abd1;
}

/deep/ .el-form-item__content {
  font-size: 12px;
}

/deep/ .el-autocomplete {
  width: 100%;
}
</style>
